<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>客户界面</title>

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        table{
            width: 100%;
            margin:10px;
        }
        table th {
            text-align: center;
            background-color: orange;
        }
        table td {
            text-align: center;
        }
        a {
            display: inline-block;
            text-emphasis: none;
            text-decoration: none;
            color: orange;
        }
    </style>
</head>
<body>
<!--    <a type="#">添加客户</a>-->
<a href="addCustomer.html">添加客户</a>
<h1>客户信息</h1>
<table align="center" cellspacing="0">
    <tr style="font-weight: bolder">
        <th>客户编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>电话</th>
        <th>职位</th>
        <th>公司</th>
        <th>操作</th>
    </tr>
    <tbody id="table1">

    </tbody>
</table>

<div style="width: 100%;">
    <span onclick="firstPage()">首页</span>
    <span onclick="prePage()">上一页</span>
    <span onclick="nextPage()">下一页</span>
    <span onclick="lastPage()">尾页</span>


    <span>共<b id="total">0</b>条数据</span><span style="display: inline-block; width: 5px"></span>
    <span>第<b id="pageNum">0</b>页</span>
    <span>共<b id="pages">0</b>页</span>
</div>

<script src="../js/jquery-3.6.0.js"></script>
<script type="text/javascript">
    var pageNum = 1;
    var pageSize = 5;

    getCustomerList(pageNum, pageSize);

    function firstPage() {
        this.pageNum = 1;
        getCustomerList(pageNum, pageSize);
    }

    function prePage() {
        if(pageNum <= 1){
            alert("已经是第一页了，无法上一页");
            return;
        }
        this.pageNum -= 1;
        getCustomerList(pageNum, pageSize);
    }

    function nextPage() {
        if(pageNum >= $("#pages").html()) {
            alert("已经是最后一页了，没有下一页");
            return;
        }
        this.pageNum += 1;
        getCustomerList(pageNum, pageSize);
    }

    function lastPage() {
        this.pageNum = $("#pages").html();
        getCustomerList(pageNum, pageSize);
    }

    function getCustomerList(pageNum, pageSize) {
        $.ajax({
           url: "/cus",
           type: "get",
           data:{
              pageNum: pageNum,
              pageSize: pageSize
           },
           success: function (result) {
               var customers = result.data;

               //清空表格
               $("#table1").empty();

               if(customers.size != 0) {
                   for (var cus of customers.list) {
                       var tr = $("<tr></tr>");
                       var td1 = $("<td>"+cus.cid+"</td>");
                       var td2 = $("<td>"+cus.cname+"</td>");
                       var td3 = $("<td>"+cus.csex+"</td>");
                       var td4 = $("<td>"+cus.ctel+"</td>");
                       var td5 = $("<td>"+cus.cjob+"</td>");
                       var td6 = $("<td>"+cus.ccompany+"</td>");
                       var td7 = $("<td><span style='margin-left: 10px;' class='sc'>删除</span><span style='margin-left: 10px;' class='xg'>修改</span></td>");
                       //将每行每列数据添加到该行
                       tr.append(td1);
                       tr.append(td2);
                       tr.append(td3);
                       tr.append(td4);
                       tr.append(td5);
                       tr.append(td6);
                       tr.append(td7);
                       //放入添加的条数
                       $("#table1").append(tr);
                   }
                   //初始化分页
                   $("#total").html(customers.total);
                   $("#pageNum").html(customers.pageNum);
                   $("#pages").html(customers.pages);
               }else if(pageNum > 1){
                   pageNum -= 1;
                   getCustomerList(pageNum, pageSize);
               }
           }
        });
    }

    $("#table1").on("click", ".sc", function (){
        var flag = window.confirm("你确定要删除这条数据吗？不可恢复！");
        if(!flag) {
            return;
        }

        var td1 = $(this).parent().prevAll().last();
        var cid = td1.html();

        $.ajax({
            url: "/cus/" + cid,
            type: "post",
            async: false,
            data: {
                _method: "delete"
            },
            success: function (result) {
                if(result.data == 1) {
                    alert(result.message);
                }
            }
        });
        getCustomerList(pageNum, pageSize);
    });

    //前往修改页面
    $("#table1").on("click", ".xg", function (){
        //获取值
        var td1 = $(this).parent().prevAll().last();
        var cid = td1.html();
        location.href = "updateCustomer.html?cid=" + cid;
    });

</script>


</body>
</html>
